<!-- 监控概览 -->
<script setup>
import { ref } from 'vue'
import cardModule2 from '@/components/common/cardModule2.vue'
import zcgk from './overview/zcgk.vue'
import gzsb from './overview/gzsb.vue'
import device from './overview/device.vue'

const activeName = ref('supervise')

const handleClick = (tab, event) => {
  console.log(tab, event)
}



</script>

<template>
  <el-tabs v-model="activeName" class="wrapper-tabs" @tab-click="handleClick">
    <el-tab-pane label="监管总览" name="supervise">
      <!-- 资产概况 -->
      <zcgk />
      <!-- 设备类7个图表 -->
      <device />
      <!-- 故障类四个图表 -->
      <gzsb />
      <div class="h-16"></div>
    </el-tab-pane>
    <el-tab-pane label="能耗总览" name="energy">
      能耗总览
    </el-tab-pane>
    <el-tab-pane label="业务总览" name="business">
      业务总览
    </el-tab-pane>
    <el-tab-pane label="网络总览" name="network">
      网络总览
    </el-tab-pane>
  </el-tabs>
</template>

<style scoped lang="stylus">
.wrapper-tabs {
  padding: 0 0 0 18px;
}
.wrapper-tabs :deep(.el-tabs__nav-wrap:after) {
  height: 0;
}
</style>